<template>
  <el-drawer
    class="self_drawer"
    v-model="showdrawer"
    direction="btt"
    :show-close="false"
    @close="cancel"
  >
    <template #header>
      <div class="drawer-header">
        <span class="title">
          <span>预览</span>
        </span>
        <el-icon class="icon" @click="cancel"><Close /></el-icon>
      </div>
    </template>
    <el-container style="height: 100%">
      <el-header
        class="header-drawer"
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 10px;
        "
      >
        <span class="title-search">抽取前10条作为样例数据</span>
        <el-button type="primary" class="search-btn" @click="exportData">
          导出
        </el-button>
      </el-header>
      <el-main
        class="container bc-table"
        style="height: 100%; padding-top: 0px"
      >
        <TableX :tableData="props.tableData" :column="culumns"></TableX>
      </el-main>
    </el-container>
  </el-drawer>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import TableX from "@/components/table/table.vue";
const props = defineProps({
  tableData: Array,
  column: Array,
});

let culumns = ref([]);
watch(
  () => props.column,
  (newval) => {
    culumns.value = newval.map((item) => {
      return {
        ...item,
        props: item.label,
      };
    });
  },{
    immediate: true,
    deep: true,
  }
);

const emit = defineEmits(["close", "exportData"]);

let showdrawer = ref(true);

const cancel = () => {
  emit("close");
};

const exportData = () => {
  emit("exportData");
};
</script>

<style lang="scss">
.self_drawer {
  height: 80% !important;
}
.el-drawer__header {
  padding: 0 40px;
  margin-bottom: 0;
}
.el-drawer__body {
  padding: 0 40px;
  background: #f6f9ff;
}
.el-drawer__footer {
  background: #f6f9ff;
}
.drawer-header {
  width: 100%;
  height: 70px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #2263bf;
    .total {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #666666;
      margin-left: 40px;
    }
  }
  .icon {
    font-size: 20px;
    cursor: pointer;
  }
}
.drawer-footer {
  text-align: right;
  padding: 0 40px;
  .el-pagination {
    display: flex;
    justify-content: flex-end;
    .is-active {
      background: #2263bf !important;
    }
  }
  .el-pager li:hover {
    background: rgba(142, 191, 255, 0.72) !important;
    color: #2263bf !important;
  }

  .btn-prev {
    width: 84px !important;
    position: relative;
    padding-left: 16px;
    &::before {
      content: "<<";
      position: absolute;
      left: 8px;
      top: 0px;
    }
  }
  .btn-next {
    width: 84px !important;
    position: relative;
    padding-right: 16px;
    &::before {
      content: ">>";
      position: absolute;
      right: 8px;
      top: 0;
    }
  }
}

.header-drawer {
  padding-top: 20px;
  box-sizing: border-box;
  height: auto;
}
.title-search {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
}
</style>